PointC

I'd go even simpler with yoyo tweens and repeatDelay. Something like this. https://codepen.io/PointC/pen/JjVqxgY/63a3e8ecfaf75286961b6e2ec36abed7 Just my 2 cents. YMMV. Happy tweening. Just FYI - the original pen that I forked had tweens with a 0.1 → 1 second duration on a timeline that was 100 seconds long. With scrub set to true they were animating super fast because they were only a tiny fraction of the duration. .1% - 1%.

I think you'd just need to clearProps when you resize and kill the tween. https://codepen.io/PointC/pen/bGJyjYz/03ab931389596f7fd6e582a8f9c6c1ec But I agree with @Trapti, there are easier ways to do this with an SVG. Happy tweening.

Feels like the origin is much higher on the targets in that example. I also don't think there is any z rotation. Just a trick of the perspective. Here's a quick fork of your demo. I also switched to SplitText instead of SplitType. This is a GSAP forum after all. 😉 https://codepen.io/PointC/pen/dyLERxK Hopefully that helps. Happy tweening.

I'd also recommend using a unique class as @Rodrigo suggested. You can, however, make it work with the original HTML by using a child combinator to choose only the direct descendants of the header-icons class. gsap.to('.header-icons > div', { Happy tweening.

Welcome to the forum. I'd probably use a yoyo and repeat:1 for the opacity in/out. Also making sure the ease is set to none as this is a scrub:true situation. https://codepen.io/PointC/pen/dyLwoej Hopefully that helps. Happy tweening and welcome aboard.

We have several mouse follow effect threads. Here are a couple that should point you in the right direction. Happy tweening.

We need to keep this forum focused on GSAP questions. This also seems like the same question you asked here: I'd follow the advice in that thread and use the video @Rodrigo posted as a guide. If you have any GSAP related questions, we're happy to help. Best of luck on your project.

Nothing jumps out immediately at me as to why that would be a problem. But it's hard to say without a minimal demo. If you can provide that, someone can most likely point you in the right direction. Happy tweening.

You'll want to put all the tweens on a timeline and move the scrollTrigger to the timeline rather than the single tween. https://codepen.io/PointC/pen/gOyQWqY Hopefully that helps. Happy tweening.

Welcome to the forum. If I understand you correctly, I think you'd want to tween the drawSVG path from 0% 10% → 90% 100%. That way you're always showing 10%. You could also add a tween at the beginning or end to make it appear/disappear too. Happy tweening and welcome aboard. https://codepen.io/PointC/pen/vYMQXWe

Using preserveAspectRatio="none" and a vector effect of non-scaling-stroke is problematic. This was discussed in this thread: I would probably come to the same conclusion as that thread and generate the curved line dynamically. Happy tweening.

You can set the stroke-dasharray and animate the stroke-dashoffset with CSS, but I'd recommend using drawSVG as it solves a lot of browser inconsistencies. Happy tweening.

Welcome to the forum. If you're talking about the whole path changing as you scroll, you'd move the trigger to the timeline and add a second tween to animate the stroke color as the ball animates. https://codepen.io/PointC/pen/xxeaKeo/48ff3b51feeaaec506ed6260b59efa17 If you meant the path would change to green only as far as the ball has traveled, you'd need a second green path that is drawn as you scroll. https://codepen.io/PointC/pen/dyLqybY/f291cb8f00561f83216ca7df0680ea9b Happy tweening.

If you want to overlap each little group of elements, I'd go with a child timeline for each group and add those to a parent. The parent then plays/reverses on click. Something like this. https://codepen.io/PointC/pen/jORKGax The overlap is on line 47. Each child timeline is 0.45 seconds in duration so I overlapped by 0.2 seconds (approximately half way), but set everything to your liking. The nice thing with a parent timeline is you can set a timeScale too if everything is too fast or slow for your needs. Happy tweening.

sure - just use the start/end properties motionPath: { align: sparklePath, path: sparklePath, alignOrigin: [0.5, -0.5], start: 1, end: 0 }, Happy tweening.